<template>
    <div class="work-nav">
        <div class="work-nav-btns">
            <span v-for="(item, index) in workTypes" :key="index" class="work-nav-btns__btn"
                :class="{ active: currentType === item.value }" @click="changeType(item.value)"
                @dblclick="onClickRefresh(index)">
                {{ item.label }}
            </span>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Tab',
    props: {
        currentType: {
            type: [String, Number],
            default: '',
        },
        onChangeTab: {
            type: Function,
            default: () => { }
        },
        onRefresh: {
            type: Function,
            default: () => { }
        },
        loading: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            workTypes: [
                {
                    label: '全部',
                    value: '',
                },
                {
                    label: '动火作业',
                    value: '动火作业',
                },
                {
                    label: '有限空间',
                    value: '有限空间',
                },
                {
                    label: '其他作业',
                    value: '其他特殊作业',
                },
                {
                    label: '船只靠离泊',
                    value: '船只靠离泊',
                },
                {
                    label: '下舱作业',
                    value: '下舱作业',
                },
                {
                    label: '巡检作业',
                    value: '巡检作业',
                },
                {
                    label: '检维修作业',
                    value: '检维修作业',
                },
                {
                    label: '吊装作业',
                    value: '吊装作业',
                },
                {
                    label: '高处作业',
                    value: '高处作业',
                },
            ],
        }
    },
    methods: {
        changeType(val) {
            if (this.loading) {
                return
            }
            if (typeof (this.onChangeTab) == 'function') {
                this.onChangeTab(val);
            }
        },
        onClickRefresh(val) {
            if (this.loading) {
                return
            }
            if (typeof (this.onRefresh) == 'function') {
                this.onRefresh(val);
            }
        }
    }
}
</script>
<style lang="less" scoped>
.work-nav {
    // margin-left: 45px;
    // margin-right: 45px;
    // margin-bottom: 12px;
    padding: 12px;
    background-image: url(~@/assets/svg/work-nav-bg.svg);
    background-size: cover;
    background-repeat: no-repeat;

    .work-nav-btns {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .work-nav-btns__btn {
            width: 180px;
            height: 56px;
            background: linear-gradient(170.8deg, rgba(23, 73, 176, 0) 5.81%, #3357a0 91.89%);
            border: 1px solid #97bbff66;
            color: #fff;
            font-size: 16px;
            line-height: 54px;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
            user-select: none;


        }

        .active {
            background: url(~@/assets/svg/btn-active-bg.svg);
            font-weight: 1000;
            border: none;
            line-height: 56px;
        }
    }
}
</style>